<template>
  <view style="position: relative;">
    <view class="box_1">
      <view class="image-box_1">
        <image src="../../static/psu.png" mode="" class="image-text_1"></image>
      </view>
      <view class="wrapper_1">
        <view class="">
          <text lines="1" class="text1" style="color: #AC9867;font-size: 30rpx;">{{operatorInfo.contractTitle}}</text>
        </view>
        <view class="">
          <text lines="1" decode="true" class="text2">合同编号：{{operatorInfo.contractCode}}</text><br />
          <text class="text3">发起时间：{{operatorInfo.createTime}}</text>
        </view>
      </view>
    </view>
    <view class="Evidence">
      <button @click="toSignContractInfo()">过程证据</button>
    </view>
    <view class="Process">
      <view class="Process2">
        <view>{{operatorInfo.handleLogPojoList[0].handleName}}</view>
        <view class="Process_text1">
          <text>发起</text>
          <text style="margin-left: 20%;">{{operatorInfo.handleLogPojoList[0].handleTime}}</text>
          <text></text>
        </view>
      </view>


      <view v-for="(item,index) in signatorys" :key="item.userId">
        <view class="Process3">
          <view>{{item.handleName}}</view>
          <view class="Process_text1">
            <text style="color: red;"
              v-if="item.handleType==1||item.handleType==2||item.handleType==3">
              代签
              </text>
              <text style="color: red;"
              v-if="item.handleType==4">
              拒签
              </text>
            <text v-else>完签</text>
            <text style="margin-right: 10%;">{{item.handleTime}}</text>
            <!-- <text style="margin-left: 12%;">定位：具体的位置</text> -->
          </view>
        </view>
        <view class="text-wrapper_51" v-if="item.handleType==4">
          <text class="text_111">拒签原因：
            {{item.descStr}}
          </text>
        </view>
        <view class="peto" style="margin-top: 10rpx" v-else>
          <text lines="1" class="text_11">查看现场拍证</text><br />
          <!-- <image mode="" class="label_3" src="/static/JZ.png" @click="areShow()"></image> -->
          <image mode="" class="label_3" :src="item.evidenceInfoList[0].evidenceUrl"
            @click="areShow(item.evidenceInfoList[0].evidenceUrl)"></image>
        </view>
      </view>


    </view>


    <view class="icon">
      <view class="yuan1"></view>
      <view style=" margin-left: 20rpx;width: 6rpx;height: 60rpx;background: #E1D1AE;"></view>
      <view class="yuan1"></view>
      <view v-for="(item,index) in length" :key="index">
        <view class="shu"></view>
        <view class="yuan1"></view>
      </view>
    </view>




    <view class="zzc" v-show="orShow"></view>
    <view class="box_2" v-show="orShow">
      <view class="text-wrapper_5">
        <text lines="1" class="text_1" @click="noShow()">×</text>
        <text lines="1" class="text_2">拍证</text>
      </view>
      <text lines="1" class="paragraph_1">为了使文件更具有法律效应，可上传:单据、房本、签署现场、卸货过程等信息，文件<br />大小不能超过30MB。</text>
      <image :src="url" class="image_1"></image>

      <view class="group_3"></view>
      <view class="text-wrapper_2">
        <text lines="1" class="text_4">×</text>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        orShow: false,
        //存储文件信息,
        fileInfo: {},
        url: '', //每次点击传递的url图片
      }
    },
    mounted() {
      const value = uni.getStorageSync("file");
      // console.log(value)
      if (value) {
        this.fileInfo = value
      }
      this.getOperatorInfo()
    },
    methods: {
      //去签约详情
      toSignContractInfo() {
        uni.setStorageSync('signatoryListLogin', this.operatorInfo)
        uni.redirectTo({
          url: '/subpkg/signContract-info/signContract-info'
        })
      },
      areShow(val) {
        this.url = val
        this.orShow = !this.orShow
      },
      noShow() {
        this.orShow = !this.orShow
      },
      //获取文件操作日志
      getOperatorInfo() {
        this.$store.dispatch('contract/getOperatorInfo', this.fileInfo.id)
      }
    },
    computed: {
      //计算文件详情
      ...mapState({
        operatorInfo: state => state.contract.operatorInfo,
      }),

      //计算出左边icon的长度
      length() {
        let num = 1
        if (!this.operatorInfo.handleLogPojoList) return
        num = this.operatorInfo.handleLogPojoList.length - 2
        return num
      },
      //计算签署方
      signatorys() {
        let num = []
        if (!this.operatorInfo.handleLogPojoList) return
        var b = JSON.parse(JSON.stringify(this.operatorInfo.handleLogPojoList));
        num = b.slice(1)
        return num
      }
    }
  }
</script>

<style>
  .text-wrapper_51 {
    background-color: rgba(244, 244, 244, 1.000000);
    border-radius: 10rpx;
    height: auto;
    display: flex;
    flex-direction: column;
    width: 266rpx;
    margin: 8rpx 0 auto 192rpx;
  }

  .text_111 {

    /* width: 133rpx; */
    height: auto;
    overflow-wrap: break-word;
    color: rgba(125, 125, 125, 1);
    font-size: 18rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    /* white-space: nowrap; */
    line-height: 24rpx;
    margin: 13rpx 0 0 17rpx;
    padding-bottom: 20rpx;
  }

  * {
    padding: 0;
    margin: 0;
  }

  .box_1 {
    display: flex;
    padding-left: 20rpx;
    padding-top: 60rpx;
    padding-bottom: 20rpx;
    margin: 0 30rpx;
    border-bottom: #AC9867 1px solid;
  }

  .image-box_1 {
    margin-right: 40rpx;
  }

  .image-text_1 {
    width: 160rpx;
    height: 160rpx;
  }

  .wrapper_1 {
    width: 393rpx;
    height: 170rpx;
    font-size: 30rpx;
    line-height: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .wrapper_1 .text3,
  .wrapper_1 .text2 {

    font-size: 24rpx;
  }

  .Evidence button {
    float: right;
    width: 195rpx;
    height: 48rpx;
    font-size: 28rpx;
    margin: 24rpx 48rpx 0 0;
    color: #ffffff;
    line-height: 48rpx;
    background: #AB9766;
    border-radius: 10rpx;
  }

  .Process1 {
    margin: 0 auto;
    margin-top: 80rpx;
    width: 350rpx;
    height: 70rpx;
    font-size: 32rpx;
    color: #AC9867;
  }

  .Process2 {
    margin: 0 auto;
    margin-left: 200rpx;
    margin-top: 80rpx;
    width: 480rpx;
    height: 70rpx;
    font-size: 32rpx;
    color: #AC9867;
  }

  .Process3 {
    margin: 0 auto;
    margin-left: 200rpx;
    margin-top: 40rpx;
    width: 480rpx;
    height: 70rpx;
    font-size: 32rpx;
    color: #AC9867;
  }

  .Process_text {
    font-size: 24rpx;
    display: flex;
    /* justify-content: space-between; */
    color: #CCCCCC;
  }

  .Process_text1 {
    font-size: 24rpx;
    display: flex;
    justify-content: space-between;
    color: #CCCCCC;
  }

  .yuan1 {
    width: 40rpx;
    height: 40rpx;
    background: #AC9867;
    border: 4rpx solid #FFFFFF;
    opacity: 0.6;
    border-radius: 50%;

  }

  .shu {
    margin-left: 20rpx;
    width: 6rpx;
    height: 200rpx;
    background: #E1D1AE;
  }

  .icon {
    position: absolute;
    left: 123rpx;
    top: 340rpx;
  }

  .text_11 {
    width: 107rpx;
    height: 18rpx;
    overflow-wrap: break-word;
    color: rgba(125, 125, 125, 1);
    font-size: 26rpx;
    white-space: nowrap;
    line-height: 24rpx;
    margin-top: 20rpx;
    margin-left: 200rpx;
  }

  .label_3 {
    width: 74rpx;
    height: 72rpx;
    margin: 8rpx 0 1rpx 207rpx;
    /* background-color: #AB9766; */
  }

  .box_2 {

    background-color: rgba(255, 255, 255, 1.000000);
    border-radius: NaNrpx;
    position: relative;
    width: 750rpx;
    /* height: 1012rpx; */
    height: 1000rpx;
    margin-top: -1450rpx;
    display: flex;
    flex-direction: column;
    border-radius: 35rpx 35rpx 0 0;
    top: -140rpx;

  }

  .text-wrapper_5 {
    width: 678rpx;
    height: 32rpx;
    flex-direction: row;
    display: flex;
    margin: 44rpx 0 0 30rpx;
  }

  .text_1 {
    width: 30rpx;
    height: 31rpx;
    webkit-text-stroke: 1px rgba(102, 102, 102, 1);
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 48rpx;
    font-family: SimHei;
    text-align: left;
    white-space: nowrap;
    line-height: 24rpx;
  }

  .text_2 {
    width: 60rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(159, 137, 89, 1.000000);
    font-size: 30rpx;
    font-family: SimHei;
    text-align: left;
    white-space: nowrap;
    line-height: 24rpx;
    margin: 3rpx 0 0 286rpx;
  }

  .text_3 {
    width: 60rpx;
    height: 29rpx;
    overflow-wrap: break-word;
    color: rgba(159, 137, 89, 1.000000);
    font-size: 30rpx;
    font-family: SimHei;
    text-align: left;
    white-space: nowrap;
    line-height: 24rpx;
    margin: 3rpx 0 0 242rpx;
  }

  .paragraph_1 {
    width: 670rpx;
    height: 42rpx;
    overflow-wrap: break-word;
    color: rgba(247, 86, 60, 1);
    font-size: 18rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    line-height: 24rpx;
    margin: 45rpx 0 0 30rpx;
  }

  .image_1 {
    width: 198rpx;
    height: 221rpx;
    margin: 134rpx 0 0 81rpx;
  }



  .group_3 {
    position: absolute;
    left: 29rpx;
    top: 230rpx;
    width: 300rpx;
    height: 346rpx;
    border: 4px solid rgba(204, 204, 204, 1);
    display: flex;
    flex-direction: column;
  }

  .text-wrapper_2 {
    background-color: rgba(204, 204, 204, 1.000000);
    border-radius: 50%;
    height: 40rpx;
    display: flex;
    flex-direction: column;
    width: 40rpx;
    position: absolute;
    left: 320rpx;
    top: 213rpx;
  }

  .text_4 {
    width: 16rpx;
    height: 16rpx;
    webkit-text-stroke: 1px rgba(255, 255, 255, 1);
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1.000000);
    font-size: 24rpx;
    font-family: SimHei;
    text-align: left;
    white-space: nowrap;
    line-height: 24rpx;
    margin: 9rpx 0 0 12rpx;
  }

  .zzc {
    position: absolute;
    height: 500rpx;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);

  }
</style>
